import styled from 'styled-components'
import * as vars from './style/variales'

// 1.基本使用
export const AppWrapper = styled.div`
  .content {
    border: 1px solid blue;
  }
`

// 2.子元素单数抽取到一个样式组件
// 3.可以接受外部传入的props
// 4.可以通过attrs给标签模板字符串中提供属性
// 5.单独的文件中引入变量
export const SectionWrapp = styled.div.attrs((props) => ({
  tcolor: props.color || 'blue',
}))`
  border: 1px solid red;

  .title {
    font-size: ${(props) => props.size}px;
    color: ${(props) => props.tcolor};

    &:hover {
      background-color: skyblue;
    }
  }

  .content {
    font-size: ${vars.largeSize};
    color: ${vars.primaryColor};
  }
`
